<template>
    <div v-loading="loading">
        <quilleditor v-model="content"
            ref="myTextEditor"
            :options="editorOption"
            @change="onChange"> 
            <div id="toolbar"
                slot="toolbar">
                <template v-if="!config.qllink">
                    <select class="ql-size">
                        <option value="small"></option>
                        <!-- Note a missing, thus falsy value, is used to reset to default -->
                        <option selected></option>
                        <option value="large"></option>
                        <option value="huge"></option>
                    </select>
                    <span class="ql-formats"><select class="ql-font">
                            <option selected="selected"></option>
                            <option value="serif"></option>
                            <option value="monospace"></option>
                        </select></span>
                    <!-- Add subscript and superscript buttons -->

                    <span class="ql-formats"><button type="button"
                            class="ql-list"
                            value="ordered"></button></span>
                    <span class="ql-formats"><button type="button"
                            class="ql-list"
                            value="bullet"></button></span>

                    <span class="ql-formats"><select class="ql-header">
                            <option value="1"></option>
                            <option value="2"></option>
                            <option value="3"></option>
                            <option value="4"></option>
                            <option value="5"></option>
                            <option value="6"></option>
                            <option selected="selected"></option>
                        </select></span>
                    <span class="ql-formats"><select class="ql-color">
                            <option selected="selected"></option>
                            <option value="#e60000"></option>
                            <option value="#ff9900"></option>
                            <option value="#ffff00"></option>
                            <option value="#008a00"></option>
                            <option value="#0066cc"></option>
                            <option value="#9933ff"></option>
                            <option value="#ffffff"></option>
                            <option value="#facccc"></option>
                            <option value="#ffebcc"></option>
                            <option value="#ffffcc"></option>
                            <option value="#cce8cc"></option>
                            <option value="#cce0f5"></option>
                            <option value="#ebd6ff"></option>
                            <option value="#bbbbbb"></option>
                            <option value="#f06666"></option>
                            <option value="#ffc266"></option>
                            <option value="#ffff66"></option>
                            <option value="#66b966"></option>
                            <option value="#66a3e0"></option>
                            <option value="#c285ff"></option>
                            <option value="#888888"></option>
                            <option value="#a10000"></option>
                            <option value="#b26b00"></option>
                            <option value="#b2b200"></option>
                            <option value="#006100"></option>
                            <option value="#0047b2"></option>
                            <option value="#6b24b2"></option>
                            <option value="#444444"></option>
                            <option value="#5c0000"></option>
                            <option value="#663d00"></option>
                            <option value="#666600"></option>
                            <option value="#003700"></option>
                            <option value="#002966"></option>
                            <option value="#3d1466"></option>
                        </select></span>
                    <span class="ql-formats"> <select class="ql-background">
                            <option value="#000000"></option>
                            <option value="#e60000"></option>
                            <option value="#ff9900"></option>
                            <option value="#ffff00"></option>
                            <option value="#008a00"></option>
                            <option value="#0066cc"></option>
                            <option value="#9933ff"></option>
                            <option selected="selected"></option>
                            <option value="#facccc"></option>
                            <option value="#ffebcc"></option>
                            <option value="#ffffcc"></option>
                            <option value="#cce8cc"></option>
                            <option value="#cce0f5"></option>
                            <option value="#ebd6ff"></option>
                            <option value="#bbbbbb"></option>
                            <option value="#f06666"></option>
                            <option value="#ffc266"></option>
                            <option value="#ffff66"></option>
                            <option value="#66b966"></option>
                            <option value="#66a3e0"></option>
                            <option value="#c285ff"></option>
                            <option value="#888888"></option>
                            <option value="#a10000"></option>
                            <option value="#b26b00"></option>
                            <option value="#b2b200"></option>
                            <option value="#006100"></option>
                            <option value="#0047b2"></option>
                            <option value="#6b24b2"></option>
                            <option value="#444444"></option>
                            <option value="#5c0000"></option>
                            <option value="#663d00"></option>
                            <option value="#666600"></option>
                            <option value="#003700"></option>
                            <option value="#002966"></option>
                            <option value="#3d1466"></option>
                        </select></span>
                    <span class="ql-formats"><button type="button"
                            class="ql-bold"></button></span>
                    <span class="ql-formats"><button type="button"
                            class="ql-italic"></button></span>
                    <span class="ql-formats"><button type="button"
                            class="ql-underline"></button></span>
                    <span class="ql-formats"><button type="button"
                            class="ql-strike"></button></span>
                    <span class="ql-formats"><button type="button"
                            class="ql-blockquote"></button></span>
                    <span class="ql-formats"><button type="button"
                            class="ql-code-block"></button></span>
                    <span class="ql-formats"><button type="button"
                            class="ql-header"
                            value="1"></button></span>
                    <span class="ql-formats"><button type="button"
                            class="ql-header"
                            value="2"></button></span>
                    <span class="ql-formats"><button type="button"
                            class="ql-list"
                            value="ordered"></button></span>
                    <span class="ql-formats"><button type="button"
                            class="ql-list"
                            value="bullet"></button></span>
                    <span class="ql-formats"><button type="button"
                            class="ql-script"
                            value="sub"></button></span>
                    <span class="ql-formats"><button type="button"
                            class="ql-script"
                            value="super"></button></span>
                    <span class="ql-formats"><button type="button"
                            class="ql-indent"
                            value="-1"></button></span>
                    <span class="ql-formats"><button type="button"
                            class="ql-indent"
                            value="+1"></button></span>
                    <span class="ql-formats"> <button type="button"
                            class="ql-direction"
                            value="rtl"></button></span>

                    <span class="ql-formats">
                        <select class="ql-align">
                            <option selected="selected"></option>
                            <option value="center"></option>
                            <option value="right"></option>
                            <option value="justify"></option>
                        </select>
                    </span>
                    <span class="ql-formats">
                        <button type="button"
                            class="ql-clean"></button>
                    </span>

                    <span class="ql-formats">
                        <button type="button"
                            @click="imgClick"
                            style="outline:none">

                            <svg viewBox="0 0 18 18">
                                <rect class="ql-stroke"
                                    height="10"
                                    width="12"
                                    x="3"
                                    y="4"></rect>
                                <circle class="ql-fill"
                                    cx="6"
                                    cy="7"
                                    r="1"></circle>
                                <polyline class="ql-even ql-fill"
                                    points="5 12 5 11 7 9 8 10 11 7 13 9 13 12 5 12"></polyline>
                            </svg>
                        </button>
                    </span>
                    <span class="ql-formats"><button type="button"
                            class="ql-video"></button></span>
                    <span class="ql-formats"><button type="button"
                            class="ql-link"></button></span>
                </template>
                <span v-if="config.qllink"
                    class="ql-formats"><button type="button"
                        class="ql-link"></button></span>
            </div>
        </quilleditor>
    </div>
</template>
<script>
//  import hljs from 'highlight.js'
import axios from "axios";
import { quillEditor } from "vue-quill-editor";
//  import quillEditor, { Quill } from 'vue-quill-editor'

// import { ImageDrop } from 'quill-image-drop-module'
// import ImageResize from 'quill-image-resize-module'
// Quill.register('modules/imageDrop', ImageDrop)
// Quill.register('modules/imageResize', ImageResize)

export default {
  name: "editor",
  components: {
    quillEditor
  },
  props: {
    value: {
      type: String
    },
    /*上传图片的地址*/
    uploadUrl: {
      type: String,
      default: "/"
    },
    /*上传图片的file控件name*/
    fileName: {
      type: String,
      default: "file"
    },
    maxUploadSize: {
      type: Number,
      default: 1024 * 1024 * 500
    },
    config: {
      qllink: false
    }
  },
  data() {
    return {
      loading: false,
      content: "",
      editorOption: {
        modules: {
          toolbar: "#toolbar"
        }
      },
      imageDrop: true,
      imageResize: {
        displayStyles: {
          backgroundColor: "black",
          border: "none",
          color: "white"
        },
        modules: ["Resize", "DisplaySize", "Toolbar"]
      }
    };
  },
  methods: {
    onChange() {
      console.log(1)
      this.$emit("input", this.content);
    },
    /*选择上传图片切换*/
    onFileChange(e) {
      console.log("!!!", e);
      this.loading = true;
      var fileInput = e.target;
      if (fileInput.files.length === 0) {
        return;
      }
      this.editor.focus();
      // if (fileInput.files[0].size > this.maxUploadSize) {
      //   this.$alert('图片不能大于500KB', '图片尺寸过大', {
      //     confirmButtonText: '确定',
      //     type: 'warning',
      //   })
      // }
      var data = new FormData();
      data.append(this.fileName, fileInput.files[0]);
      data.append("folder", "new");
      axios.post(this.uploadUrl, data).then(res => {
        if (res.data) {
          this.editor.insertEmbed(
            this.editor.getSelection().index,
            "image",
            this.$fnc.getImgUrl(res.data.result)
          );
        }
        this.loading = false;
      });
    },
    /*点击上传图片按钮*/
    imgClick() {
      if (!this.uploadUrl) {
        this.$fnc.alertError("no editor uploadUrl");
        return;
      }
      /*内存创建input file*/
      var input = document.createElement("input");
      input.type = "file";
      input.name = this.fileName;
      input.accept = "image/jpeg,image/png,image/jpg,image/gif";
      input.onchange = this.onFileChange;
      input.click();
    }
  },
  computed: {
    editor() {
      return this.$refs.myTextEditor.quill;
    }
  },
  components: {
    quilleditor: quillEditor
  },
  mounted() {
    this.content = this.value;
  },
  watch: {
    value(newVal, oldVal) {
      if (this.editor) {
        if (newVal !== this.content) {
          this.content = newVal;
        }
      }
    }
  }
};
</script>
